<template>
  <div class="serve-detalil flex-col flex-y-center">
    <div class="serve-detalil-text flex-col">
      <div class="text-align m-b-20">
        <h2>服务详情</h2>
      </div>

      <div>
        <h3>参考价：玻璃清洁 18元/平方米</h3>
        <h3>服务内容</h3>
        <li>
          内外玻璃精细擦拭、窗框/窗槽/把手/窗台深度清洁、纱窗拆卸清洗赠送、操作区域防护清洁、定向除装修后残存胶漆
        </li>
      </div>
    </div>

    <div class="descriptions-view">
      <h3>服务内容：</h3>
      <el-table :data="tabledata" border>
        <el-table-column
          prop="mj"
          label="项目"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="date"
          label="内容"
          align="center"
        ></el-table-column>
      </el-table>
    </div>

    <div class="flex-y-center next-but flex-x-reverse">
      <el-button @click="nextchange" type="primary" style="width: 200px"
        >下一步</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentRow: false,
      tabledata: [
        {
          mj: "0-15平方米",
          date: "	1-2小时",
        },
        {
          mj: "	16-30平方米",
          date: "1.5-2.5小时",
        },
        {
          mj: "	31-45平方米",
          date: "2-3小时",
        },
        {
          mj: "	46平方米以上",
          date: "2.5小时以上",
        },
      ],
    };
  },
  methods: {
    nextchange() {
      this.$router.push({
        name: "chaboli-form",
        query: {
          stepsactive: 3,
        },
      });
    },
    
  },
};
</script>

<style lang="scss" scoped>
.serve-detalil {
  width: 100%;
  border: 1px solid #e4e7ed;
  padding: 20px;
  overflow-y: scroll;
  box-shadow: inset 0 0 10px rgba(172, 172, 172, 0.5);

  &::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 */
  }

  .serve-detalil-text {
    width: 70%;

    h3 {
      line-height: 40px;
    }

    ol li {
      line-height: 30px;
      margin-left: 20px;
    }
  }

  .descriptions-view {
    width: 70%;
    margin-top: 30px;

    h3 {
      margin-bottom: 20px;
    }
  }
}
.next-but {
  width: 100%;
  margin-top: 30px;
  margin-right: 50px;
}
</style>
